<template>
        <el-scrollbar style="height:100%;">
            <div class="container p-40">
                    <p class="float-top">更新时间: {{ updateTime }}</p>
                    <div>
                        <div class="display">
                            <div class="box-shaow p-2" style="width: 70%">
                                <span class="f-18">费用概况</span>
                                <!-- style="margin-top: 0.6rem" -->
                                <div class="div-block">
                                    <div class="separate">
                                        <p class="f-s-4">
                                            {{ cost.expensesReceivable || '00.00' }}
                                        </p>
                                        <p class="f-s-3 c-grey m-t-1">应收费用(元)</p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-4">
                                            {{ cost.paidExpenses || '00.00' }}
                                        </p>
                                        <p class="f-s-3 c-grey m-t-1">实收费用(元)</p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-4">
                                            {{ cost.accumulatedArrears || '00.00' }}
                                        </p>
                                        <p class="f-s-3 c-grey m-t-1">累计欠款(元)</p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="box-shaow p-2"
                                style="width: calc(30% - 0.2rem); margin-left: 0.2rem"
                            >
                                <span class="f-18">完成进度</span>
                                <div
                                    id="dashboard"
                                    style="width: 100%; height: calc(100% - .2rem)"
                                ></div>
                            </div>
                        </div>
                        <div class="display p-2 m-t-2 box-shaow" v-loading="ringLoading">
                            <div style="width: 70%">
                                <span class="f-18">
                                    实时概况
                                    <i
                                        class="el-icon-refresh"
                                        style="cursor: pointer"
                                        @click="loadAreaData(1)"
                                        >刷新</i
                                    >
                                </span>
                                <div class="div-block">
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ areaData.totalArea || '0' }}
                                        </p>
                                        <p class="f-s-2 c-grey">
                                            持有房产建筑面积
                                            <br />(平方米)
                                        </p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ areaData.propertyArea || '0' }}
                                        </p>
                                        <p class="f-s-2 c-grey">
                                            自有产权房产
                                            <br />(平方米)
                                        </p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ areaData.otherArea || '0' }}
                                        </p>
                                        <p class="f-s-2 c-grey">
                                            自使用产权房产
                                            <br />(平方米)
                                        </p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ areaData.commissionedArea || '0' }}
                                        </p>
                                        <p class="f-s-2 c-grey">
                                            委托管理房产
                                            <br />(平方米)
                                        </p>
                                    </div>
                                </div>
                                <div class="div-block">
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ cost.individualTenant || 0 }}
                                        </p>
                                        <p class="f-s-2 c-grey">个体租户</p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-3">{{ cost.corporateTenant || 0 }}</p>
                                        <p class="f-s-2 c-grey">企业租户</p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ cost.currentPerformanceContract || 0 }}
                                        </p>
                                        <p class="f-s-2 c-grey">当前履行合约</p>
                                    </div>
                                    <div class="separate">
                                        <p class="f-s-3">
                                            {{ cost.nearExpiryContract || 0 }}
                                        </p>
                                        <p class="f-s-2 c-grey">临近到期合约</p>
                                    </div>
                                </div>
                            </div>
                            <div style="width: calc(30% - 0.2rem); margin-left: 0.2rem">
                                <span class="f-18">当前空置率</span>
                                <div
                                    id="ring"
                                    style="width: 100%; height: calc(100% - 0.24rem)"
                                ></div>
                            </div>
                        </div>
                        <div class="bottom-div">
                            <span class="f-18">综合分析</span>
                            <div id="comprehensive" v-loading="compLoading"></div>
                            <el-select 
                                v-model="year" 
                                @change="selChange" 
                                class="btm-sel" 
                                style="right: 110px"
                            >
                                <el-option
                                    v-for="(item, index) in years"
                                    :key="index"
                                    :value="item"
                                    :label="item"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-model="quarter"
                                @change="selChange"
                                class="btm-sel"
                            >
                                <el-option value="0" label="全部"></el-option>
                                <el-option value="1" label="一季度"></el-option>
                                <el-option value="2" label="二季度"></el-option>
                                <el-option value="3" label="三季度"></el-option>
                                <el-option value="4" label="四季度"></el-option>
                            </el-select>
                        </div>
                        <p class="d-flex d-p-flex">
                            <span class="f-18">区域分析</span>
                            <span
                                v-if="
                                    showMaxData==false&&
                                    regionalAnalysisDataSource &&
                                    regionalAnalysisDataSource.length > 5
                                "
                                @click="showMaxData=true;loadData()"
                                class="f-14 color-gray"
                                style="cursor: pointer"
                            >
                                展示更多
                                <span style="transform: rotate(270deg); display: inline-block">ㄑ</span>
                            </span>
                            <span v-if="regionalAnalysisDataSource.length===0" class="f-14 color-gray" style="cursor: pointer">
                                Empty-暂无数据
                            </span>
                        </p>
                        <div
                            v-if="
                                regionalAnalysisDataSource &&
                                regionalAnalysisDataSource.length > 0
                            "
                            class="box-div d-flex"
                            style="
                                height: 4rem;
                                width: calc(100% + 20px);
                                margin-left: -10px;
                                margin-top: 0.4rem;
                            "
                        >
                            <div
                                class="d-flex box-block"
                                v-for="(item, index) in regionalAnalysisDataSource"
                                :key="index"
                                v-if="showMaxData||index<5"
                            >
                                <p class="title f-18">{{ item.buildingName }}</p>
                                <div :id="'rents-chart-' + index" class="chart"></div>
                                <div class="conclusion">
                                    <p>
                                        <span>上月房租应收:</span>
                                        <span
                                            >￥{{
                                                item.rentReceivableMonth || '00.00'
                                            }}</span
                                        >
                                    </p>
                                    <p>
                                        <span>上月房租实收:</span>
                                        <span>￥{{ item.rentPaidInMonth || '00.00' }}</span>
                                    </p>
                                    <p>
                                        <span>地址:</span>
                                        <span>{{ item.buildingAddress || '00.00' }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </el-scrollbar>
</template>

<script>
import {
	costOverview,
	getAreaAnalysisData,
	getComprehensiveAnalysisData,
	getAreaData,
	getAllByYear
} from "@/api/data";
export default {
	name: "data",
	data() {
		return {
			moneyData: [],
			regionalAnalysisDataSource: [],
			year: new Date().getFullYear()+"",
			years: [],
			quarter: "0",
			updateTime: "0000-00-00 00:00",
            comp: {},
            compLoading:false,
            ring: {},
            ringLoading:false,
			cost: {},
			dashboard: {},
			areaData: {},
			//区域分析TYPE
			showMaxData: false,
		};
	},
	computed: {
		yearData(v) {
			let arr = [];
			for (let i = 1; i < 13; i++) {
				arr.push(`${this.year}-${i < 10 ? "0" + i : i}`);
			}
			return arr;
		},
	},
	methods: {
		selChange() {
            this.compLoading = true;
            getComprehensiveAnalysisData(this.year,this.quarter).then((res) => {
				if (res.code === 10000) {
                    this.moneyData = [];
                    res.data.forEach((v) => {
						this.moneyData.push(v.amountCollected);
                    });
                    this.$nextTick(()=>{
                        this.loadEcharts();
                    });
				}
			}).finally(_=>{
                this.compLoading = false;
            });
		},
		loadAreaData(typeid) {
            this.ringLoading = true;
			getAreaData(typeid).then(res => {
                if(res.data){
                    this.areaData = res.data;
                    if (typeid == 1) {
                        this.$message.success('刷新成功');
                    }
                }
			}).finally(_=>{
                this.ringLoading = false;
            });
		},
		Init() {
			this.loadAreaData(0);
            this.loadData();
			setTimeout(() => {
				this.loadData();
			}, 2.5 * 60 * 1000);
		},
		loadEcharts() {
			this.comp = this.$echarts.init(document.getElementById("comprehensive"));
			this.ring = this.$echarts.init(document.getElementById("ring"));
			this.dashboard = this.$echarts.init(document.getElementById("dashboard"));
			let compOption = {
				tooltip: {
					formatter: function (params, ticket, callback) {
						return "￥" + params.data;
					},
					extraCssText:
						"background:#dae9fc;border:1px solid #4291FA;color:#4291FA;padding:5px;",
				},
				legend: {
					data: ["支付金额"],
					top: "0",
                    right: "0",
                    itemWidth:this.$font.convertPx(40),
                    itemHeight:this.$font.convertPx(20),
					selectedMode: false,
				},
				grid: {
					left: "5%",
					right: "0",
					bottom: "5%",
				},
				xAxis: {
					splitLine: { show: false },
					splitLine: { show: false },
					axisTick: {
						//y轴刻度线
						show: false,
					},
					axisLabel: {
						textStyle: {
							fontSize: this.$font.convertPx(18),
						},
					},
					axisLine: {
						//y轴
						show: false,
					},
					data: this.yearData,
				},
				yAxis: {
					splitLine: { show: false },
					axisTick: {
						//y轴刻度线
						show: false,
					},
					axisLabel: {
						textStyle: {
							fontSize: this.$font.convertPx(18),
						},
					},
					axisLine: {
						//y轴
						show: false,
					},
				},
				series: [
					{
						name: "支付金额",
						barWidth: "10%",
						itemStyle: {
							color: "#4291FA",
							barBorderRadius: [10, 10, 10, 10],
						},
						type: "bar",
						data: this.moneyData,
					},
				],
            };
            if(this.moneyData && this.moneyData.length){
                compOption.legend.top = "0";
                compOption.legend.data = ["支付金额"];
                compOption.legend.textStyle = {
                    color:"#000",
                    fontWeight :"normal",
                    fontSize:this.$font.convertPx(18)
                }
                compOption.series = [
                    {
                    name: "支付金额",
						barWidth: "10%",
						itemStyle: {
							color: "#4291FA",
							barBorderRadius: [10, 10, 10, 10],
						},
						type: "bar",
						data: this.moneyData,
                    }
                ]
            }else{
                compOption.legend.top = "center";
                compOption.legend.right = "center";
                compOption.legend.data = ["暂无数据"];
                compOption.legend.itemWidth = 0;
                compOption.legend.textStyle = {
                    color:"#000",
                    fontWeight :"bold",
                    fontSize:this.$font.convertPx(24)
                }
                compOption.tooltip.formatter = function(){
                    return "模拟数据";
                }
                compOption.series = [
                    {
                        name: "暂无数据",
						barWidth: "10%",
						itemStyle: {
							color: "#ccc",
							barBorderRadius: [10, 10, 10, 10],
						},
						type: "bar",
						data: [5640,6740,7200,6500,5640,6740,7200,6500,5640,6740,7200,6500],
                    }
                ]
            }

			let ringOption = {
				color: ["#F66262", "#8D42F9", "#4392F9", "#FAB440","#4bcc7a"],
				tooltip: {
					trigger: "item",
					formatter: "{b} " /*鼠标经过显示*/,
				},
				legend: {
					orient: "vertical",
					selectedMode: false,
					align: "left",
					top: "15%",
					left: "65%",
					itemWidth: 20,
					itemHeight: 20,
                    itemGap: this.$font.convertPx(15),
					formatter: "{name}",
					textStyle: {
                        color: "#000",
                        fontSize:(this.$font.convertPx(20))
					},
					data: [
						{ name: `出租:${this.cost.leaseRate}%` },
						{ name: `自用:${this.cost.selfUseRate}%` },
						{ name: `空置:${this.cost.vacancyRate}%` },
						{ name: `预定:${this.cost.predeterminedRate}%` },
						{ name: `办公:${this.cost.officeRate}%` },
					],
				},
				series: [
					{
						type: "pie",
						radius: ["47.5%", "70%"], // 半径
						center: ["30%", "50%"], // 位置
						hoverAnimation: false,
						data: [
							{
								value: this.cost.leaseRate,
								name: `出租:${this.cost.leaseRate}%`,
							},
							{
								value: this.cost.selfUseRate,
								name: `自用:${this.cost.selfUseRate}%`,
							},
							{
								value: this.cost.vacancyRate,
								name: `空置:${this.cost.vacancyRate}%`,
							},
							{
								value: this.cost.predeterminedRate,
								name: `预定:${this.cost.predeterminedRate}%`,
                            },
                            {
								value: this.cost.officeRate,
								name: `办公:${this.cost.officeRate}%`,
							}
						],
						itemStyle: {
							normal: {
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
					},
				],
            };
            // 仪表板
			let dashboardOption = {
                graphic:[
                {       
                    //图形中间文字
                    type:"text",
                    left:"center",
                    bottom:"35%",
                    style:{
                        text:(this.cost.progressCompleted||0)+"%",
                        font:'.4rem bolder',
                        textAlign:"center",
                    }
                },{
                    type:"text",
                    left:"center",
                    bottom:"15%",
                    style:{
                        text:"费用收入",
                        font:'.2rem bolder',
                        textAlign:"center",
                    }
                }],
                series: [{
					name: '一般',
					type: 'pie',
                    //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
					startAngle: 0,
					hoverAnimation: false,
					radius: ["110%", "140%"],
					center: ['50%', '80%'],
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [{
						value: 100,
						itemStyle: {
							normal: {
								color: "rgba(80,150,224,0)"
							}
						}
					},
					{
						value: this.cost.progressCompleted,
						itemStyle: {
							normal: {
								color: "rgba(80,150,224,1)"
							}
						}

					},
					{
						value: (100 - Number(this.cost.progressCompleted||0)),
						itemStyle: {
							normal: {
								color: "rgba(80,150,224,0.1)"
							}
						}
					}]
				}]
			};
			//综合分析
			this.comp.setOption(compOption);
			//当前空置率
			this.ring.setOption(ringOption);
			//完成进度
			this.dashboard.setOption(dashboardOption);
			// 指定图表的配置项和数据
			let option1 = {
				graphic: [
					{
						//环形图中间添加文字
						type: "text", //通过不同top值可以设置上下显示
						left: "center",
						top: "center",
						style: {
							text: "42.58%",
							textAlign: "center",
							fill: "#4291FA", //文字的颜色
							fontSize: this.$font.convertPx(18),
							color: "#4291FA",
							fontFamily: "Microsoft YaHei",
						},
					},
				],
				series: [
					{
						type: "pie",
						//内外圆弧
						radius: ["80%", "100%"],
						data: [42.58, 57.42],
						//起始角度
						startAngle: 180,
						silent: true,
						//悬浮放大
						hoverAnimation: false,
						color: ["#4291FA", "#eeeeee"],
						label: {
							//去除饼图的指示折线label
							normal: {
								show: false,
							},
						},
					},
				],
			};
			//遍历生成图表
			this.regionalAnalysisDataSource.forEach((v, i) => {
				let chart = this.$echarts.init(
					document.getElementById("rents-chart-" + i)
				);
				let option = JSON.parse(JSON.stringify(option1));
				let rents = Number(v.occupancyRate);
				option.graphic[0].style.text = rents + "%";
				option.graphic[0].style.fill = "#000";
				option.series[0].data = [rents, 100 - rents];
				chart.setOption(option);
			});
        },
		loadData() {
			let self = this;
			//费用概况 实时概况
			let p1 = new Promise((resolve, reject) => {
				costOverview().then((res) => {
					if (res.code === 10000) {
						self.cost = res.data;
						self.updateTime = res.data.refreshTime;
						resolve();
					} else {
						reject();
						this.$message.warning(res.msg);
					}
				});
			});

			//区域分析
			let p2 = new Promise((resolve, reject) => {
				getAreaAnalysisData(1).then((res) => {
					if (res.code === 10000) {
						self.regionalAnalysisDataSource = res.data;
						resolve();
					} else reject();
				});
			});

			//综合分析
			let p3 = new Promise((resolve, reject) => {
				getComprehensiveAnalysisData(this.year, this.quarter).then((res) => {
					if (res.code === 10000) {
                        self.moneyData = [];
                        res.data.forEach((v) => {
						    self.moneyData.push(v.amountCollected);
                        });

						resolve();
					} else reject();
				});
			});

			Promise.all([p1, p2, p3]).finally(_=>{
                this.$nextTick(()=>{
                    self.loadEcharts();
                })
            });
			getAllByYear().then(res => {
				this.years = res.data;
			});
		},
	},
	mounted() {
        this.Init();
	},
};
</script>

<style scoped>
.d-p-flex {
	margin-bottom: 0.2rem;
}
.box-div {
	width: 100%;
	margin-bottom: 0.2rem;
    flex-wrap: wrap;
}
.box-div > * {
	height: 100%;
	box-sizing: border-box;
}
.title-blok {
	width: 4rem;
	background-image: url('../../assets/img/housing/fygl_money_bg.png');
	background-size: 100% 100%;
	padding-left: 0.6rem;
	flex: 2;
}
.img-block {
	padding-top: 0.1rem;
	padding-bottom: 0.3rem;
	flex-direction: column;
	flex: 2;
	justify-content: center;
}
.img-block p {
	text-align: center;
	flex: 1;
	margin-bottom: 10px;
}
.img-block div {
	flex: 9;
	width: 100%;
}
#comprehensive {
	width: 100%;
	height: 5rem;
	margin-bottom: 0.6rem;
}
.box-block {
	width: calc(100% / 5);
	padding: 0.35rem;
	flex-direction: column;
	background-image: url('../../assets/img/housing/fygl_apartment_bg.png');
	background-size: 100% 100%;
	height: 5rem;
}
.box-block > .title {
	color: #4d4d4d;
	text-align: left;
	width: 100%;
}
.box-block > .chart {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0.5rem;
	border-bottom: 1px solid #eee;
	margin-bottom: 0.15rem;
	height: 3rem;
}
.box-block > .conclusion {
	width: 100%;
}
.box-block > .conclusion > p {
	color: #4d4d4d;
	width: 100%;
	font-size: 0.14rem;
	margin: 0.15rem 0;
	display: flex;
	justify-content: space-between;
}
.float-top {
	position: absolute;
	top: 0.075rem;
	right: 0.4rem;
	font-size: 0.15rem;
}

.f-bold {
	font-weight: bold;
}

.w-100 {
	width: 100%;
}

.separate:not(:last-child) {
	border-right: 2px solid #eee;
}

.display {
	display: flex;
}

.p-2 {
	padding:0 0.2rem;
}

.m-t-2 {
	margin-top: 0.2rem;
}

.m-t-1 {
	margin-top: 0.1rem;
}

.box-shaow {
	box-shadow: 0px 0px 10px #cae3f3;
}

.div-block {
	display: flex;
	margin-top: 0.4rem;
	margin-bottom: 0.2rem;
}

.f-s-4 {
	font-size: 0.4rem;
	font-weight: bold;
}

.f-s-3 {
	font-size: 0.25rem;
}

.f-s-2 {
	font-size: 0.2rem;
}

.f-s-1 {
	font-size: 0.1rem;
}

.c-grey {
	color: #6c6c6c;
}

.div-block > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.div-block > div > * {
	text-align: center;
}

.bottom-div {
	width: 100%;
	margin-top: 0.4rem;
	position: relative;
}

#comprehensive {
	width: 100%;
	height: 5rem;
}
.btm-sel {
	position: absolute;
	width: 100px;
	top: 0;
	right: 0;
}
</style>
